<template>
	<!-- 背包 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<view class="navbar">
			<navigator open-type="navigateBack">
				<image src="/static/images/back.png"></image>
			</navigator>
			<text>背包</text>
		</view>
		<view class="topnav">
			<view class="item" :class="{'active' : active === 0}" @click="changeType(0)">待提货</view>
			<view class="item" :class="{'active' : active === 1}" @click="changeType(1)">已回收</view>
		</view>
		<noData v-if="goodsList.length === 0" title="当前背包中没有商品，快前往开盒吧！" />
		<navigator class="toOpenbox" open-type="switchTab" url="/pages/blindbox/blindbox" v-if="goodsList.length === 0">
			去开盒</navigator>
		<!-- 待提货列表 -->
		<view class="activity" v-if="goodsList.length > 0 && active === 0" v-for="(item,index) in goodsList"
			:key="index">
			<view class="goodsname">
				<view class="activityname">
					<image :src="item.cover_image"></image>
					<text>{{item.name}}</text>
				</view>
				<view @click="checkedAllBox(item)" class="checkicon">
					<image src="/static/images/check.png" v-if="!item.ischecked"></image>
					<image src="/static/images/checked.png" v-else></image>
				</view>
			</view>
			<view class="goodsmain" v-for="(goods,i) in item.goods" :key="i">
				<view class="goods">
					<image :src="goods.cover_image"></image>
					<view class="goodsinfo">
						<view class="goodstitle">{{goods.goods_name}} </view>
						<view class="goodsvalue">商品价值<text>￥{{goods.goods_price}}</text>
							<image v-if="goods.is_ti==1" style="height: 40rpx; width: 106rpx; margin: -2% 0.5%; "
								src="/static/images/home/t.png" class="icon"></image>
							<image v-if="goods.is_ti!==1" style="height: 40rpx; width: 106rpx;margin: -2% 0.5%; "
								src="/static/images/home/h.png" class="icon"></image>

							<!-- <image  v-if="goods.is_ti==1" style="height: 40rpx; width: 70rpx; " src="/static/images/home/t.png" class="icon"></image> -->
						</view>

						<view class="goodstime">开盒时间：{{goods.create_time}}</view>
						<!-- <image src="/static/images/home/t.png" class="icon"></image> -->
					</view>
				</view>

				<view @click="checkedBox(index,goods)" class="checkicon">
					<image src="/static/images/check.png" v-if="!goods.ischecked"></image>
					<image src="/static/images/checked.png" v-else></image>
				</view>
			</view>
			<!-- 			<view class="seemore" @click="seemore(item)" v-if="item.showMore">
				<text>查看更多</text>
				<image src="/static/images/seemore.png"></image>
			</view> -->
		</view>
		<!-- 已回收列表 -->
		<view class="recoverymain" v-for="(item,index) in goodsList" :key="index"
			v-if="goodsList.length > 0 && active === 1">
			<view @click="checkedGoods(item)" class="checkicon">
				<image src="/static/images/check.png" v-if="!item.ischecked"></image>
				<image src="/static/images/checked.png" v-else></image>
			</view>
			<view class="goods">
				<view class="goodsinfo">
					<image :src="item.cover_image"></image>
					<view class="goodsinfos">
						<view class="goodstitle">{{item.goods_name}}</view>
						<view class="goodsvalue">商品价值<text>￥{{item.goods_price}}</text></view>
					</view>
				</view>
				<view class="goodstime">开盒时间：{{item.create_time}}</view>
			</view>
		</view>
		<view class="packagebot" v-if="goodsList.length>0">
			<view class="checkedAll" @click="changeCheckedAll()" v-if="active === 1">
				<view class="checkicon">
					<image src="/static/images/check.png" v-if="!ischeckedAll"></image>
					<image src="/static/images/checked.png" v-else></image>
				</view>
				<text>全选</text>
			</view>

			<view class="btn1" @click="recovery" v-show="active === 0 && checkedActid.length <= 1">立即回收</view>
			<view class="btn4" v-show="active === 0 && checkedActid.length > 1 ">立即回收</view>
			<view class="btn2 btn2_zs" v-if="active === 0" @click="goodsGive()" style="margin: 0 30rpx;">赠送</view>
			<view class="btn2" @click="toConfirmorder" v-if="active === 0 && tui.length <=0">确定提货</view>
			<view class="btn5" style="background-color:#CCCCCC;" v-else>确定提货</view>
			<view class="btn3" @click="deleteRecord" v-if="active === 1">删除</view>
		</view>
		<!-- 回收商品 -->
		<u-popup v-model="showRecovery" mode="bottom" border-radius="36" :mask-close-able="false">
			<view class="recovery">
				<view class="recoverygoods">
					<view class="recoverygoods_title">回收商品</view>
					<view class="recoverygoods_close" @click="showRecovery = false">X</view>
					<view class="recoverygoods_value">商品价值<text>￥{{recycleInfo.p_goods_price}}</text></view>
					<view class="recoverygoods_price">
						<image src="/static/images/mall/huishoubg.png"></image>
						<view class="recoverygoods_price_main">
							<view class="recoverygoods_price_main_text">回收价格<text
									v-if="Number(recycleInfo.recycle_percentage)>0">+{{recycleInfo.recycle_percentage}}%</text>
							</view>
							<view class="recoverygoods_price_main_price">￥{{recyclingPrice}}</view>
						</view>
					</view>
					<view class="recoverygoods_desc">共回收<text>{{recycleInfo.goods_num}}</text>件商品</view>
					<view class="recoverygoods_coupon">
						<view class="recoverygoods_coupon_title">使用回收券</view>
						<navigator class="recoverygoods_coupon_text"
							:url="`/pages/mine/recycleCoupon/availableRecycleCoupon?activity_id=${checkedActid.toString()}`"
							v-if="JSON.stringify(coupon)=='{}'">
							<text class="used" v-if="couponList.length===0" @click.stop>暂无可用回收券</text>
							<text class="used" v-else>使用回收券</text>
						</navigator>
						<navigator class="recoverygoods_coupon_text"
							:url="`/pages/mine/recycleCoupon/availableRecycleCoupon?activity_id=${checkedActid.toString()}`"
							v-if="JSON.stringify(coupon)!='{}'">
							<text class="use">{{couponLevel}}折回收券</text>
						</navigator>
					</view>
					<view class="recoverygoods_btn">
						<view class="recoverygoods_btn_btn1" @click="showRecovery = false">再考虑一下</view>
						<view class="recoverygoods_btn_btn2" @click="confirmRecovery">确定回收</view>
					</view>
					<view class="recoverygoods_explain">注：回收商品的金额仅能用于抽盲盒，不能提现！</view>
				</view>
			</view>
		</u-popup>
		<!-- 猜您喜欢 -->
		<view class="like" v-if="blindboxList.length > 0">精选商品</view>
		<!-- 推荐盲盒 -->
		<blindbox :goodsList="blindboxList" goodsType="3" v-if="blindboxList.length > 0" />
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" v-if="goodsList.length > 0" />
		<!-- 赠送 -->
		<uni-popup ref="giveGoodsModal" type="center" :animation="true">
			<giveGoods :goodsIds='selectGoodsList' @close="giveClose()" />
		</uni-popup>

	</view>
</template>

<script>
	import blindbox from '@/components/goodslist/index_box'
	import pullDownRefresh from '@/components/pullDownRefresh'
	import giveGoods from './components/goodsGive.vue'
	export default {
		components: {
			blindbox,
			pullDownRefresh,
			giveGoods
		},
		data() {
			return {
				active: 0,
				goodsList: [], //盲盒列表
				blindboxList: [], //推荐盲盒列表
				ischeckedAll: false, //是否全选
				showRecovery: false, //显示回收商品
				loading: 0,
				page: 1, //推荐盲盒分页
				offset: 1, //背包列表分页
				offs: 1, //回收列表分页
				checkedActid: [], //当前选中的商品所属的活动id
				selectGoodsList: [], //选中的商品列表
				recycleInfo: {
					goods_num: 1, //选择商品数量
					p_goods_price: '', //打折前原价
					recycling_ratio: "", //活动回收比例
					recycle_percentage: "", //用户等级回收比例
					n_total_price: '' //打折后的价格
				}, //回收商品信息
				isDeduction: false, //是否选择回收券抵扣
				couponList: [], //可用回收券列表
				coupon: {}, //选中的回收券信息
				couponLevel: '', //回收券折扣率
				couponId: 0, //回收券id
				recyclingPrice: '', //回收价格
				allowTap: true, //防误触
				tui: []
			}
		},
		onShow() {
			console.log(this.checkedActid);
			console.log(this.selectGoodsList);
			if (!this.showRecovery) {
				this.active = 0;
				this.offset = 1;
				this.page = 1;
				this.goodsList = [];
				this.blindboxList = [];
				this.checkedActid = [];
				this.selectGoodsList = [];
				this.getBackpackindex();
				this.getIndexRecommend();
			}
			let page = getCurrentPages();
			let curPage = page[page.length - 1];
			if (curPage.$vm.coupon && JSON.stringify(curPage.$vm.coupon) != '{}') {
				this.coupon = curPage.$vm.coupon;
				this.couponLevel = Number(this.coupon.recycle_ratio) / 10;
				this.couponId = this.coupon.coupon_id;
				let ratio = (Number(this.recycleInfo.recycle_percentage) + Number(this.coupon.recycle_ratio)) / 100;
				ratio = ratio > 1 ? 1 : ratio;
				this.recyclingPrice = (Number(this.recycleInfo.p_goods_price) * ratio).toFixed(2);
			}
		},
		onPullDownRefresh() {
			this.goodsList = [];
			this.selectGoodsList = [];
			if (this.active === 0) {
				this.offset = 1;
				this.getBackpackindex();
			} else {
				this.offs = 1;
				this.getBackpackrecyclelis();
			}
		},
		
		onReachBottom() {
			if (this.goodsList.length > 0) {
				if (this.active === 0) {
					this.offset++;
					this.getBackpackindex();
				} else {
					this.offs++;
					this.getBackpackrecyclelis();
				}
			} else {
				this.page++;
				this.getIndexRecommend();
			}
		},
		methods: {
			giveClose() {
				this.$api.shareInfo().then(res=>{
					if(res*1 == 0){
						uni.showModal({
							title: '温馨提示',
							content: '您不具备提货权限',
							success: res => {
								
							}
						});	
					}else{
						this.goodsList = [];
						this.selectGoodsList = [];
						if (this.active === 0) {
							this.offset = 1;
							this.getBackpackindex();
						} else {
							this.offs = 1;
							this.getBackpackrecyclelis();
						}
						this.$refs.giveGoodsModal.close()
					}
					
				})
				
			}, // 商品赠送
			goodsGive() {
				console.log(this.selectGoodsList);
				if (this.selectGoodsList.length == 0) {
					uni.showToast({
						title: '请选择您想赠送的商品！',
						icon: 'none'
					})
					return false
				}
				
				this.$api.shareInfo().then(res=>{
					if(res*1 == 0){
						uni.showModal({
							title: '温馨提示',
							content: '您不具备提货权限',
							success: res => {
								
							}
						});	
					}else{
						var is_ti = this.isti();
						console.log(is_ti.length);
						if (is_ti.length > 0) {
							uni.showToast({
								title: '存在仅能回收的商品',
								icon: 'none'
							})
							return false;
						} else {
							this.$api.activity_liveone().then(res => {
								if(res&&res.length>0){
									this.$refs.giveGoodsModal.open()
								}else{
									
									uni.showToast({
										title: '没有可赠送的下级',
										duration:3000,
										icon: 'none'
									})
									return false;
								}
							})
							
						}
					}
					
				})
				

				
			},
			//获取背包列表
			getBackpackindex() {
				this.loading = 1;
				this.$api.backpackindex({
					offset: this.offset
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.length > 0) {
						this.loading = 0;
						this.goodsList = this.goodsList.concat(res);
					} else {
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
			//获取回收列表
			getBackpackrecyclelis() {
				this.loading = 1;
				this.$api.backpackrecyclelis({
					offset: this.offs
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.length > 0) {
						this.loading = 0;
						this.goodsList = this.goodsList.concat(res);
					} else {
						this.loading = 3;
						uni.showToast({
							title: '没有更多了~',
							icon: 'none'
						})
					}
				})
			},
			//查看更多活动商品
			seemore(item) {
				if (item.page === 0) {
					item.goods = [];
				}
				item.page++;
				this.$api.backpackgoodslist({
					offset: item.page,
					activity_id: item.activity_id,
					type: item.ischecked
				}).then(res => {
					if (res.length > 0) {
						item.goods = item.goods.concat(res);
						if (item.ischecked) {
							item.goods.map(g => {
								let q = this.selectGoodsList.indexOf(g.id);
								if (q === -1) {
									this.selectGoodsList.push(g.id);
								}
							})
							item.goods = data;
						}
						if (res.length < 10) {
							item.showMore = false;
						}
					} else {
						item.showMore = false;
						uni.showToast({
							title: '没有更多了~',
							icon: 'none'
						})
					}
				})
			},
			//推荐盲盒
			getIndexRecommend() {
				this.loading = 1;
				this.$api.indexRecommend({
					offset: this.page
				}).then(res => {
					if (res.length > 0) {
						this.loading = 0;
						this.blindboxList = this.blindboxList.concat(res);
						this.blindboxList.forEach(item => {
							if (item.label_name === null) {
								item.label_name = [];
							} else {
								item.label_name = item.label_name.split(',');
							}
						})
					} else {
						this.loading = 3;
						uni.showToast({
							title: '没有更多了~',
							icon: 'none'
						})
					}
				})
			},
			//切换背包类型
			changeType(e) {
				this.tui = [];
				if (this.active !== e) {
					this.active = e;
					this.goodsList = [];
					this.selectGoodsList = [];
					if (this.active === 0) {
						this.offset = 1;
						this.getBackpackindex();
					} else {
						this.offs = 1;
						this.getBackpackrecyclelis();
					}
				}
			},
			// 待提货列表单选
			checkedBox(index, goods) {
				let i = this.selectGoodsList.indexOf(goods.id);
				let j = this.checkedActid.indexOf(this.goodsList[index].activity_id);
				if (this.checkedActid.indexOf(goods.activity_id) === -1) {
					this.checkedActid.push(goods.activity_id);
				}
				goods.ischecked = !goods.ischecked;
				if (goods.ischecked) {
					this.selectGoodsList.push(goods.id);
					if (goods.is_ti == 0) {
						this.tui.push(goods.id)
					}
				} else {
					this.selectGoodsList.splice(i, 1);
					this.tui.splice(this.tui.indexOf(goods.id), 1);
				}
				console.log(this.tui);
				if (this.selectGoodsList.length === 0) {
					this.checkedActid = [];
				}
				if (!goods.ischecked) {
					this.goodsList[index].ischecked = false
				} else {
					const packageData = this.goodsList[index].goods.every(item => {
						return item.ischecked === true
					})
					if (packageData) {
						this.goodsList[index].ischecked = true
					} else {
						this.goodsList[index].ischecked = false
					}
				}
				const goodsData = this.goodsList[index].goods.every(item => {
					return item.ischecked === false
				})
				if (goodsData) {
					this.checkedActid.splice(j, 1);
				}
			},
			// 已回收列表单选
			checkedGoods(item) {
				item.ischecked = !item.ischecked;
				if (!item.ischecked) {
					this.ischeckedAll = false
				} else {
					const packageData = this.goodsList.every(item => {
						return item.ischecked === true
					})
					if (packageData) {
						this.ischeckedAll = true
					} else {
						this.ischeckedAll = false
					}
				}
			},
			// 待提货列表单项活动全选
			checkedAllBox(item) {
				let j = this.checkedActid.indexOf(item.activity_id);
				if (j === -1) {
					this.checkedActid.push(item.activity_id);
				}
				item.ischecked = !item.ischecked;
				let data = [];
				if (item.ischecked) {
					item.goods.map(g => {
						g.ischecked = true;
						data.push(g);
						let q = this.selectGoodsList.indexOf(g.id);
						if (q === -1) {
							this.selectGoodsList.push(g.id);
						}
					})
					item.goods = data;
				} else {
					this.checkedActid.splice(j, 1);
					item.goods.map(g => {
						g.ischecked = false;
						data.push(g);
						let q = this.selectGoodsList.indexOf(g.id);
						this.selectGoodsList.splice(q, 1);
					})
					item.goods = data;
				}
			},
			// 已回收列表全选
			changeCheckedAll() {
				this.ischeckedAll = !this.ischeckedAll;
				if (this.ischeckedAll) {
					this.goodsList.map(item => {
						item.ischecked = true
					})
				} else {
					this.goodsList.map(item => {
						item.ischecked = false
					})
				}
			},
			//立即回收
			async recovery() {
				if (this.selectGoodsList.length > 0) {
					this.coupon = {};
					this.recycleInfo = await this.$api.backpackrecycleinfo({
						goods_ids: this.selectGoodsList.toString(),
						activity_id: this.checkedActid.toString()
					})
					this.recyclingPrice = Number(this.recycleInfo.n_total_price.toFixed(2));
					this.couponList = await this.$api.backpackcouponlis({
						activity_id: this.checkedActid.toString()
					})
					this.showRecovery = true;
				} else {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				}
			},
			//确定回收
			confirmRecovery() {
				if (!this.allowTap) return
				this.allowTap = false;
				setTimeout(() => {
					this.allowTap = true;
				}, 3000)
				this.$api.backpackrecycle({
					activity_id: this.checkedActid.toString(),
					coupon_id: this.couponId,
					recycle_price: this.recyclingPrice,
					price: this.recycleInfo.p_goods_price,
					goods_ids: this.selectGoodsList.toString()
				}).then(res => {
					uni.showToast({
						title: '回收成功'
					})
					setTimeout(() => {
						this.showRecovery = false;
						this.offs = 1;
						this.page = 1;
						this.active = 1;
						this.goodsList = [];
						this.blindboxList = [];
						this.checkedActid = [];
						this.selectGoodsList = [];
						this.getBackpackrecyclelis();
					}, 1000)
				})
			},
			//确定提货
			toConfirmorder() {
				var is_ti = this.isti();
				console.log(is_ti.length);
				if (is_ti.length > 0) {
					uni.showToast({
						title: '存在仅能回收的商品',
						icon: 'none'
					})
					return false;
				} else {
					if (this.selectGoodsList.length > 0) {
						uni.navigateTo({
							url: './takedelivery?' + this.$url.urlEncode({
								page: 'package',
								goods_id: this.selectGoodsList.toString(),
								num: this.selectGoodsList.length
							})
						})
					} else {
						uni.showToast({
							title: '请选择商品',
							icon: 'none'
						})
					}
				}
			},
			isti() {
				// console.log(this.selectGoodsList);
				this.tui = [];
				this.goodsList.map(item => {
					item.goods.map(goods => {
						this.selectGoodsList.map(list => {
							if (goods['is_ti'] == 0 && list == goods['id']) {
								this.tui.push(goods['id'])
							}
						})
					})

				})
				console.log(this.tui)
				return this.tui;
			},

			//删除回收记录
			deleteRecord() {
				this.selectGoodsList = [];
				this.goodsList.map(goods => {
					if (goods.ischecked) {
						this.selectGoodsList.push(goods.id);
					}
				})
				if (this.selectGoodsList.length > 0) {
					uni.showModal({
						title: '温馨提示',
						content: '确认删除回收记录？',
						success: (res) => {
							if (res.confirm) {
								this.$api.backpackrecycledel({
									ids: this.selectGoodsList.toString()
								}).then(res => {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									setTimeout(() => {
										this.goodsList = [];
										this.offset = 1;
										this.page = 1;
										this.getBackpackrecyclelis();
									}, 1000)
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: calc(var(--status-bar-height) + 182rpx);
	}

	.navbar {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		z-index: 9999;
		position: fixed;
		top: var(--status-bar-height);
		@include center;

		navigator {
			position: absolute;
			left: 30rpx;

			image {
				width: 35rpx;
				height: 35rpx;
			}
		}

		text {
			font-size: 38rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}
	}

	.toOpenbox {
		width: 482rpx;
		height: 82rpx;
		background: linear-gradient(#FFBA00, #FE2E1C);
		border-radius: 41rpx;
		@include center font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 auto 50rpx;
	}

	.topnav {
		width: 100%;
		;
		height: 100rpx;
		background-color: #FFFFFF;
		@include evenly;
		position: fixed;
		top: calc(var(--status-bar-height) + 82rpx);
		z-index: 999;

		.item {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.active {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $main_color;
			position: relative;

			&::after {
				content: '';
				width: 46rpx;
				height: 10rpx;
				background: $main_color;
				border-radius: 5rpx;
				position: absolute;
				bottom: -11rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.activity {
		padding: 30rpx 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx;

		.goodsname {
			@include between;
			margin-bottom: 60rpx;
			position: relative;

			&::after {
				content: '';
				width: 100%;
				height: 1rpx;
				background-color: #E5E5E5;
				position: absolute;
				bottom: -30rpx;
			}

			.activityname {
				@include align-center;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 5rpx;
					margin-right: 16rpx;
				}

				text {
					width: 500rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					@include one;
				}
			}
		}
	}

	.goodsmain {
		@include between;
		margin-top: 20rpx;

		.goods {
			display: flex;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.goodsinfo {
				@include column-between;
				margin-left: 30rpx;

				.goodstitle {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					width: 300rpx;
					@include one;
				}

				.goodsvalue {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-top: -20rpx;

					text {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FF0000;
						margin-left: 20rpx;
					}
				}

				.goodstime {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.seemore {
		@include center;
		margin-top: 20rpx;

		text {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}

		image {
			width: 28rpx;
			height: 28rpx;
			margin-left: 10rpx;
		}
	}

	.checkicon {
		width: 30rpx;
		height: 30rpx;
		@include align-center;

		image {
			@include img;
		}
	}

	.recoverymain {
		padding: 46rpx 30rpx 20rpx;
		box-sizing: border-box;
		@include between;

		.goods {
			width: 640rpx;
			height: 295rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 26rpx;
			box-sizing: border-box;

			.goodsinfo {
				display: flex;
				margin-bottom: 50rpx;
				position: relative;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}

				.goodsinfos {
					@include column-between;
					margin-left: 30rpx;

					.goodstitle {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}

					.goodsvalue {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;

						text {
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #FF0000;
							margin-left: 20rpx;
						}
					}
				}

				&::after {
					content: '';
					width: 100%;
					height: 1rpx;
					background-color: #E5E5E5;
					position: absolute;
					bottom: -26rpx;
				}
			}

			.goodstime {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.packagebot {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1rpx solid #EBEBEB;
		padding: 14rpx 30rpx;
		box-sizing: border-box;
		@include between;
		position: fixed;
		bottom: 0rpx;
		z-index: 999;

		.checkedAll {
			@include align-center;

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
			}
		}

		.btn1 {
			width: 252rpx;
			height: 72rpx;
			background: linear-gradient(#ff1401, #ff9224);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 40rpx;
		}

		.btn4 {
			width: 252rpx;
			height: 72rpx;
			background-color: #CCCCCC;
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 40rpx;
		}

		.btn5 {
			width: 252rpx;
			height: 72rpx;
			background-color: #CCCCCC;
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-right: 40rpx;
		}

		.btn2 {
			width: 252rpx;
			height: 72rpx;
			background: linear-gradient(#ff9526, #ffbc54);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-right: 40rpx;
		}

		.btn2_zs {

			background: linear-gradient(rgba(0, 128, 255, 1), rgba(38, 139, 210, .7));

		}

		.btn3 {
			width: 252rpx;
			height: 72rpx;
			background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
	}

	.recovery {
		width: 750rpx;
		height: 918rpx;

		.recoverygoods {
			width: 100%;
			background-color: #FFFFFF;
			text-align: center;
			position: fixed;
			z-index: 999;
			top: 0;
			left: 50%;
			transform: translateX(-50%);

			&_title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin-top: 48rpx;
			}

			&_close {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				position: absolute;
				top: 45rpx;
				right: 50rpx;
			}

			&_value {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin-top: 63rpx;

				text {
					color: #FE0000;
					font-size: 32rpx;
				}
			}

			&_price {
				width: 292rpx;
				height: 292rpx;
				position: relative;
				margin: 40rpx auto;

				image {
					@include img;
				}

				&_main {
					position: absolute;
					top: 106rpx;
					left: 50%;
					transform: translateX(-50%);

					&_text {
						width: 220rpx;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FFFFFF;
						@include center;

						text {
							background: #E60012;
							border-radius: 14rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
							padding: 0 4rpx;
							margin-left: 12rpx;
						}
					}

					&_price {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FE0000;
						margin-top: 27rpx;
					}
				}
			}

			&_desc {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;

				text {
					color: #FF0000;
				}
			}

			&_coupon {
				width: 580rpx;
				height: 66rpx;
				background: linear-gradient(90deg, #FFDF7D 0%, #FF9453 100%);
				border-radius: 20rpx;
				padding: 0 30rpx;
				margin: 50rpx auto;
				@include between;

				&_title {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				&_text {
					@include align-center;

					.use {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FF0000;
					}

					.used {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

					image {
						width: 12rpx;
						height: 24rpx;
						margin-left: 16rpx;
					}
				}
			}

			&_btn {
				margin: 0 85rpx;
				@include between;

				&_btn1 {
					width: 250rpx;
					height: 70rpx;
					background: linear-gradient(180deg, #FF1501 0%, #FF9226 100%);
					border-radius: 35rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					@include center;
				}

				&_btn2 {
					width: 250rpx;
					height: 70rpx;
					background: linear-gradient(180deg, #FF9628 0%, #FFB752 100%);
					border-radius: 35rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					@include center;
				}
			}

			&_explain {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF670E;
				margin: 30rpx auto;
			}
		}
	}

	.like {
		width: 264rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		margin: 0 auto 30rpx;
		text-align: center;
		position: relative;

		&::before {
			content: '';
			width: 50rpx;
			height: 2rpx;
			background-color: #333333;
			position: absolute;
			left: 0rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		&::after {
			content: '';
			width: 50rpx;
			height: 2rpx;
			background-color: #333333;
			position: absolute;
			right: 0rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>
